<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript 数组与字符串转换示例</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 20px auto;
        padding: 0 20px;
        line-height: 1.6;
      }
      .note {
        background-color: #f0f0f0;
        padding: 10px;
        border-left: 4px solid #333;
        margin: 10px 0;
      }
      pre {
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 4px;
        overflow-x: auto;
      }
      #parent {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
      #child {
        width: 80px;
        height: 80px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript 数组与字符串转换示例</h1>
    <div class="note">
      请打开浏览器控制台(F12)查看输出结果
      <div id="parent">
        父元素
        <div id="child">孩子</div>
      </div>
    </div>
    <script src="array-string-examples.js"></script>
    <script>
      document.getElementById("parent").addEventListener("click", () => {
        console.log("父元素冒泡阶段触发");
      }); // 等效于第三个参数为 false

      document.getElementById("child").addEventListener("click", () => {
        console.log("子元素触发");
      });
      const map = new Map();
      map.set("a", 1);
      map.set("b", 2);
      map.set("c", 3);
      map.set("c", 33);
      map.set({ name: "zhangsan" }, 3);
      console.log(map);
      console.log(map.size);
      console.log(map.has("a"));
      console.log(map.get("a"));
      console.log(map.delete("a")); //true/false
      console.log(map.has("a")); //true/false
      console.log(map.get("a")); //值或者 undefined
      // console.log(map.clear()); //返回 undefined????
      console.log(map.has("a"));
      console.log(map.get("a"));
      console.log(map.get({ name: "zhangsan" }));
      console.log("map", map);
      console.log("map", map.keys());

      map.forEach((value, key) => {
        console.log("key", key, value);
      });
      console.log("-------------set---------------set");
      //set 值不会重复，有去重的功能；有顺序，有长度.size,性能优于数组
      //当然值可以是对象
      const set = new Set();
      set.add(1);
      set.add(2);
      set.add(3);
      set.add(3);
      set.add({ name: "zhangsan" });
      console.log(set);
      console.log(set.size); //4
      console.log(set.has(111)); //true | false
      console.log("delete", set.delete(1)); //true | false
      console.log("has", set.has(1)); //true | false
      // console.log("clear", set.clear()); //返回 undefined????
      console.log("set", set);
      console.log("set", set.keys());
      set.forEach((value, key) => {
        console.log("key", key, value);
      });
          // const test = this.fetchDataWithoutReturn();
    // console.log("打印test", test);
    // test.then((result) => {
    //   console.log("test结果？？？？？？？？？？？？？？？？:", result, test); // 输出: 结果: data
    // });
    // this.fetchDataWithoutReturn().then((result) => {
    //   console.log("结果？？？？？？？？？？？？？？？？:", result); // 输出: 结果: undefined
    // });

    // async fetchDataWithoutReturn( ) {
    //   return new Promise((resolve) =>
    //     setTimeout(() => {
    //       console.log("定时器里面的执行了");
    //       resolve("data");
    //     }, 4000)
    //   );
    //   // 这里没有 return，函数会返回 Promise<undefined>
    // },
      
    </script>
  </body>
</html>
